<template>
  <view style="padding: 10px;">

    <view class="list-item">
      <text>金额</text>
      <view class="vertical-middle">
        <input type="number" v-model="amount" placeholder="请输入" />
      </view>
    </view>
	<view class="action-btn-group">
		<button type="primary" class="action-btn no-border buy-now-btn" @click="nextStep">下一步</button>
	</view>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import { paydataCoin } from '@/api/trade.js';

export default {
  data() {
    return {
      authentication: true,
      userInfo: null,
       amount: null,
    };
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo']),
    processedPassword() {
      if (this.userInfo && this.userInfo.password) {
        const frontPart = this.userInfo.password.substring(0, 4);
        const backPart = this.userInfo.password.substring(this.userInfo.password.length - 4);
        return `${frontPart}***${backPart}`;
      }
      return '';
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {

    },

    async nextStep() {
       try {
              const response = await paydataCoin({
                amount: this.amount,
                type: 1
              });
              console.log('成功充值:', response);

            } catch (error) {
              console.error('充值失败:', error);

            }
    }
  },
};
</script>




<style lang="scss">



.list-item {
	height: 120upx;
	font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  color: #fff;
  background-color: #2f3045;
  border-radius: 4px;
  input{
	  color: #6e6f7e;
  }
}
.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			background: linear-gradient(to right, #2493f1, #14d1cc);
			margin-top: 20px;
			position:relative;

			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}


</style>
